<template>
	<div class="outer">
		<!-- 三级分类导航 -->
		<TypeNav />
		<div class="main">
			<div class="py-container">
				<!--面包屑导航-->
				<div class="bread">
					<ul class="fl sui-breadcrumb">
						<li>
							<span>全部结果</span>
						</li>
					</ul>
					<ul class="fl sui-tag">
						<!-- 三级分类的面包屑展示 -->
						<li class="with-x" v-if="searchParams.categoryName">{{ searchParams.categoryName }}<i @click="removeCategory">×</i></li>
						<!-- 搜索框内容的面包屑展示 -->
						<li class="with-x" v-if="searchParams.keyword">{{ searchParams.keyword }}<i @click="removeKeyword">×</i></li>
						<!-- 品牌面包屑展示 -->
						<li class="with-x" v-if="searchParams.trademark">{{ searchParams.trademark.split(':')[1] }}<i @click="removeTm">×</i></li>
						<!-- 平台属性展示 -->
						<li class="with-x" v-for="(prop, index) in searchParams.props" :key="index">{{ prop.split(':')[1] }}<i @click="removeAttr(index)">×</i></li>
					</ul>
				</div>

				<!-- 搜索器 -->
				<SearchSelector
					@changeTmParams="changeTmParams"
					@changePropsParams="changePropsParams"
				/>

				<!--商品展示区-->
				<div class="details clearfix">
					<!-- 列表操作区 -->
					<div class="sui-navbar">
						<div class="navbar-inner filter">
							<ul class="sui-nav">
								<li :class="{ active: orderType == '1' }" @click="changeOrder('1')">
									<a href="javascript:;">
										综合
										<span
											v-if="orderType == '1'"
											class="iconfont"
											:class="{
												'icon-jiantou_xiangxia': orderRank == 'desc',
												'icon-jiantou_xiangshang': orderRank == 'asc'
											}"
										></span>
									</a>
								</li>
								<li :class="{ active: orderType == '2' }" @click="changeOrder('2')">
									<a href="javascript:;">
										价格
										<span
											v-if="orderType == '2'"
											class="iconfont"
											:class="{
												'icon-jiantou_xiangxia': orderRank == 'desc',
												'icon-jiantou_xiangshang': orderRank == 'asc'
											}"
										></span>
									</a>
								</li>
							</ul>
						</div>
					</div>
					<!-- 商品列表 -->
					<div class="goods-list">
						<ul class="yui3-g">
							<!-- 每个li是一个商品 -->
							<li class="yui3-u-1-5" v-for="goods in goodsList" :key="goods.id">
								<div class="list-wrap">
									<div class="p-img">
										<router-link :to=" `/detail/${ goods.id }`  ">
											<!-- <img :src="goods.defaultImg" /> -->
											<img v-lazy="goods.defaultImg" />
										</router-link>
									</div>
									<div class="price">
										<strong>
											<em>¥</em>&nbsp;
											<i>{{ goods.price ? goods.price.toFixed(2) : goods.price }}</i>
										</strong>
									</div>
									<div class="attr">
										<router-link :to=" `/detail/${ goods.id }` ">{{ goods.title }}</router-link>
									</div>
									<div class="commit">
										<i class="command">已有<span>2000</span>人评价</i>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<!--
						分页器 - 分析分页器需要的数据
						pageNo 当前页,分页器要展示当前是第几页
						pageSize 每页条数,每页展示几条
						total 总条数,分页器要展示总条数
												根据总条数和每页条数,可以算出总页码,可就是为什么需要pageSize
												总页码 = 向上取整(总条数 / 每页条数)
												说明: 我们的接口返回了总页码,但是一般开发中,不会返回总页码,所以需要我们自己计算
												问: total存在store当中,为什么不能直接映射到组件中,非要在search页面映射出来再传入组件?
												   分页组件是一个公用组件,映射进去会影响到其他页面使用该组件了
						pageCount 连续数 连续展示的页码数量,一般为奇数
					-->
					<Pagination
						:pageNo="searchParams.pageNo"
						:pageSize="searchParams.pageSize"
						:total="total"
						:pageCount="5"
						@change="changePage"
					></Pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import SearchSelector from './SearchSelector'
import { mapGetters, mapActions } from 'vuex'
export default {
	name: 'Search',
	data() {
		return {
			// 发请求携带的默认参数
			searchParams: {
				// category3Id: '', // 这里不是固定的,用户可能点一级分类、二级分类、三级分类,这个参数必须根据用户点击来确定
				categoryName: '',
				keyword: '',
				trademark: '',
				props: [],
				order: '1:desc', // 默认"1:desc"综合降序
				pageNo: 1,
				pageSize: 2 // 由于数据不多,每页展示2条即可
			}
		}
	},
	components: {
		SearchSelector
	},
	computed: {
		...mapGetters('search', ['goodsList', 'total']),
		orderType() {
			return this.searchParams.order.split(':')[0]
		},
		orderRank() {
			return this.searchParams.order.split(':')[1]
		}
	},
	watch: {
		// 对已存在的数据进行监听,当前页面可以获取到 $route 路由,可以监听
		$route: {
			// 处理函数,当路由发生变化的时候,会执行这个handler
			// 两个参数
			// 参数一: newValue 代表的是改变之后的数据
			// 参数二: oldValue 代表的是改变之前的数据
			handler(newValue, oldValue) {
				// console.log('query -> ', newValue.query);
				// console.log('params -> ', newValue.params);
				// 此时拿到了数据的变化
				// 组装数据
				this.changeSearchParams()
				// 发送请求
				this.getSearchInfo(this.searchParams)
			},
			// 开启深度监听 --> 开启深度监听,$route变化 或者 它里面的属性发生变化的时候 都可以监听到
			deep: true
		}
	},
	mounted() {
		// 组装数据
		this.changeSearchParams();
		// 发送请求
		this.getSearchInfo(this.searchParams)
	},
	methods: {
		...mapActions('search', ['getSearchInfo']),
		// 组装数据
		changeSearchParams() {
			// 从home页面跳转到search页面,走mounted钩子,
			// 在mounted钩子中,组装数据
			// 		组装数据的意思是组装要发请求的数据,组装三级分类的数据,三级分类数据从哪里来?
			// 		从路由来,点击三级分类首页跳转到search页面参数是通过路由携带的,那么此时从路由中拿出来传递的数据
			// 		组装成发情的数据即可
			// 组装好数据之后,发送请求即可
			// 问题来了:
			// 		当前处于search页面的时候,也可以点击三级分类,但是并没有发送请求,因为search页面已经创建了
			// 		mounted钩子只在挂载的时候走了一次,当前在search页面,不会重新走search的mounted
			// 如何在search页面点击三级分类的时候获取到点击的数据,组装数据,发请求呢?
			// 	  解决办法:
			// 		当在search页面点击三级分类的时候,路由发生了变化了,参数在路由上
			// 		我们可以监听路由的变化,重新从路由中获取参数,再次组装数据,发送请求

			let { category1Id, category2Id, category3Id, categoryName } = this.$route.query;
			let { keyword } = this.$route.params; // 拿到搜索框数据

			this.searchParams.category1Id = category1Id;//搜索框进入的时候,此时query参数都是undefined,发请求携带undefined的参数的时候会自动把undefined的参数干掉
			this.searchParams.category2Id = category2Id;
			this.searchParams.category3Id = category3Id;
			this.searchParams.categoryName = categoryName;

			this.searchParams.keyword = keyword; // 组装搜索框数据

		},
		// 删除三级分类数据
		removeCategory() {
			/**
			不能直接删除数据,删除数据并没有把路由的参数删掉
			删除数据
			delete this.searchParams.category1Id
			delete this.searchParams.category2Id
			delete this.searchParams.category3Id
			delete this.searchParams.categoryName
			// 发送请求
			this.$store.dispatch('search/getSearchInfo', this.searchParams)
			 */
			// 重新跳转路由到search页面,重新跳转路由发生了变化,会触发watch监听,然后组装数据,发送请求
			this.$router.replace({
				name: 'search',
				// 如果有搜索框的数据,不能删除掉,当前方法是删除三级分类的数据
				params: this.$route.params
			})
		},
		// 删除keyword
		removeKeyword() {
			// 重新跳转到Search页面
			this.$router.replace({
				name: 'search',
				// 如果有三级分类的数据,不能删除掉,当前方法只删除搜索框数据
				query: this.$route.query
			})
		},
		// 品牌点击的自定义事件回调
		changeTmParams(tm) {
			// 组装数据
			this.searchParams.trademark = `${ tm.tmId }:${ tm.tmName }`

			// 发送请求
			this.getSearchInfo(this.searchParams);
		},
		// 删除品牌数据
		removeTm() {
			// 组装数据
			this.searchParams.trademark = ""
			// 发送请求
			this.getSearchInfo(this.searchParams);
		},
		// 平台属性的自定义事件回调
		changePropsParams(attr, attrVal) {
			// 组装数据
			let text = `${ attr.attrId }:${ attrVal }:${ attr.attrName }`
			// 判断数据中是否有重复的
			// includes 方法
			// 说明: 字符串和数据可以调用,这里是数组调用
			// 参数: 参数是一个值(只要是有值的即可)
			// 功能: 判断参数是否在当前数组中存在
			// 返回值: 布尔值

			// 如果是true,代表的props中已经存在这个字符串
			if ( this.searchParams.props.includes(text)  ) {
				return
			}

			this.searchParams.props.push(text)

			// 发送请求
			this.getSearchInfo(this.searchParams);
		},
		// 删除平台属性
		removeAttr(index) {
			// 组装数据
			this.searchParams.props.splice(index, 1);
			// 发送请求
			this.getSearchInfo(this.searchParams);
		},
		// 排序的点击事件
		changeOrder(type) { // type 标识,点击了哪一个的标识 '1'点击的是综合 '2'点击的价格
			// console.log(type);
			// this.searchParams.order 需要改变
			// 当点击相同类型的时候,需要判断当前是降序(desc)还是升序(asc)
			// 		当前是降序(desc)应该变成升序(asc)
			// 		当前是升序(asc)应该变成降序(desc)
			// 此时点击的是不同类型
			// 		需要变成'相反类型:desc',注意:这里只要点击不同,都应该是降序


			let text = ''; // 用来存储变化之后的结果
			// 获取当前的类型和排序
			let [orderType, orderRank] = this.searchParams.order.split(':')  //  '1:desc' -> orderType 1    orderRank desc

			// 判断点击的是相同类型还是不同类型,type是点击的类型,orderType是之前发请求的类型,如果两个类型相等,代表点击的是同一个
			if (type == orderType) { // 进入if代表点击的是同一个

				// 判断上一次发请求的是升序还是降序,orderRank是上一次发请求携带的排序
				if (orderRank == 'desc') { // 如果上一次是降序,那么得到结果,这一次是 -->  点击的相同的,变为升序
					text = `${ orderType }:asc`
				} else { // 进入else,说明上一次的是升序,现在应该变为 --> 点击相同的,变为降序
					text = `${ orderType }:desc`
				}

			} else {// 进入else代表的点击的是不同的,走else,相当于 type 和 orderType 不同才能进到else,此时点击的和之前的类型不相同,orderType上一次的类型,而type是当前类型
				text = `${type}:desc` // 此时应该是  `当前点击的类型:降序`
			}

			// 赋值数据
			this.searchParams.order = text;

			// 发送请求
			this.getSearchInfo(this.searchParams);
		},
		// 翻页 - 参数page是将要变成的页码
		changePage(page) {
			if (this.searchParams.pageNo == page) { // 代表点击的是当前页
				return
			}

			// 记录当前的翻页
			this.searchParams.isPaging = true; // isPaging 这个值用来记录当前是翻页

			// 组装数据
			this.searchParams.pageNo = page;

			// 发送请求
			this.getSearchInfo(this.searchParams)
		}
	},

	// beforeRouteEnter(to, from, next) {
	// 	console.log('beforeRouteEnter - 进入之前');
	// 	next();
  //   // 在渲染该组件的对应路由被 confirm 前调用
  //   // 不！能！获取组件实例 `this`
  //   // 因为当守卫执行前，组件实例还没被创建
  // },
  // beforeRouteUpdate(to, from, next) {
	// 	console.log('beforeRouteUpdate - 组件复用调用')
	// 	next();
  //   // 在当前路由改变，但是该组件被复用时调用
  //   // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  //   // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  //   // 可以访问组件实例 `this`
  // },
  // beforeRouteLeave(to, from, next) {
	// 	console.log('beforeRouteLeave - 离开组件调用')
	// 	next();
  //   // 导航离开该组件的对应路由时调用
  //   // 可以访问组件实例 `this`
  // }
}
</script>

<style lang="less" scoped>
	.main {
		margin: 10px 0;

		.py-container {
			width: 1200px;
			margin: 0 auto;

			.bread {
				margin-bottom: 5px;
				overflow: hidden;

				.sui-breadcrumb {
					padding: 3px 15px;
					margin: 0;
					font-weight: 400;
					border-radius: 3px;
					float: left;

					li {
						display: inline-block;
						line-height: 18px;

						a {
							color: #666;
							text-decoration: none;

							&:hover {
								color: #4cb9fc;
							}
						}
					}
				}

				.sui-tag {
					margin-top: -5px;
					list-style: none;
					font-size: 0;
					line-height: 0;
					padding: 5px 0 0;
					margin-bottom: 18px;
					float: left;

					.with-x {
						font-size: 12px;
						margin: 0 5px 5px 0;
						display: inline-block;
						overflow: hidden;
						color: #000;
						background: #f7f7f7;
						padding: 0 7px;
						height: 20px;
						line-height: 20px;
						border: 1px solid #dedede;
						white-space: nowrap;
						transition: color 400ms;
						cursor: pointer;

						i {
							margin-left: 10px;
							cursor: pointer;
							font: 400 14px tahoma;
							display: inline-block;
							height: 100%;
							vertical-align: middle;
						}

						&:hover {
							color: #28a3ef;
						}
					}
				}
			}

			.details {
				margin-bottom: 5px;

				.sui-navbar {
					overflow: visible;
					margin-bottom: 0;

					.filter {
						min-height: 40px;
						padding-right: 20px;
						background: #fbfbfb;
						border: 1px solid #e2e2e2;
						padding-left: 0;
						border-radius: 0;
						box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

						.sui-nav {
							position: relative;
							left: 0;
							display: block;
							float: left;
							margin: 0 10px 0 0;

							li {
								float: left;
								line-height: 18px;

								a {
									display: block;
									cursor: pointer;
									padding: 11px 15px;
									color: #777;
									text-decoration: none;
								}

								&.active {
									a {
										background: #e1251b;
										color: #fff;
									}
								}
							}
						}
					}
				}

				.goods-list {
					margin: 20px 0;

					ul {
						display: flex;
						flex-wrap: wrap;

						li {
							height: 100%;
							width: 20%;
							margin-top: 10px;
							line-height: 28px;

							.list-wrap {
								.p-img {
									padding-left: 15px;
									width: 215px;
									height: 255px;

									a {
										color: #666;

										img {
											max-width: 100%;
											height: auto;
											vertical-align: middle;
										}
									}
								}

								.price {
									padding-left: 15px;
									font-size: 18px;
									color: #c81623;

									strong {
										font-weight: 700;

										i {
											margin-left: -5px;
										}
									}
								}

								.attr {
									padding-left: 15px;
									width: 85%;
									overflow: hidden;
									margin-bottom: 8px;
									min-height: 38px;
									cursor: pointer;
									line-height: 1.8;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;

									a {
										color: #333;
										text-decoration: none;
									}
								}

								.commit {
									padding-left: 15px;
									height: 22px;
									font-size: 13px;
									color: #a7a7a7;

									span {
										font-weight: 700;
										color: #646fb0;
									}
								}

								.operate {
									padding: 12px 15px;

									.sui-btn {
										display: inline-block;
										padding: 2px 14px;
										box-sizing: border-box;
										margin-bottom: 0;
										font-size: 12px;
										line-height: 18px;
										text-align: center;
										vertical-align: middle;
										cursor: pointer;
										border-radius: 0;
										background-color: transparent;
										margin-right: 15px;
									}

									.btn-bordered {
										min-width: 85px;
										background-color: transparent;
										border: 1px solid #8c8c8c;
										color: #8c8c8c;

										&:hover {
											border: 1px solid #666;
											color: #fff !important;
											background-color: #666;
											text-decoration: none;
										}
									}

									.btn-danger {
										border: 1px solid #e1251b;
										color: #e1251b;

										&:hover {
											border: 1px solid #e1251b;
											background-color: #e1251b;
											color: white !important;
											text-decoration: none;
										}
									}
								}
							}
						}
					}
				}

				.page {
					width: 733px;
					height: 66px;
					overflow: hidden;
					float: right;

					.sui-pagination {
						margin: 18px 0;

						ul {
							margin-left: 0;
							margin-bottom: 0;
							vertical-align: middle;
							width: 490px;
							float: left;

							li {
								line-height: 18px;
								display: inline-block;

								a {
									position: relative;
									float: left;
									line-height: 18px;
									text-decoration: none;
									background-color: #fff;
									border: 1px solid #e0e9ee;
									margin-left: -1px;
									font-size: 14px;
									padding: 9px 18px;
									color: #333;
								}

								&.active {
									a {
										background-color: #fff;
										color: #e1251b;
										border-color: #fff;
										cursor: default;
									}
								}

								&.prev {
									a {
										background-color: #fafafa;
									}
								}

								&.disabled {
									a {
										color: #999;
										cursor: default;
									}
								}

								&.dotted {
									span {
										margin-left: -1px;
										position: relative;
										float: left;
										line-height: 18px;
										text-decoration: none;
										background-color: #fff;
										font-size: 14px;
										border: 0;
										padding: 9px 18px;
										color: #333;
									}
								}

								&.next {
									a {
										background-color: #fafafa;
									}
								}
							}
						}

						div {
							color: #333;
							font-size: 14px;
							float: right;
							width: 241px;
						}
					}
				}
			}
		}
	}
</style>